import { useEffect, useState, useRef } from 'react';
import { App } from 'antd';

import { isWx } from '@/utils';
import { getZfbPay } from '@/service/pay';

import styles from './index.module.scss';

export default props => {
    const { message } = App.useApp();
    const [loading, setLoading] = useState(false);
    const { payInfo={}, isPc=true } = props;
    const {price, ...rest} = payInfo || {};

    // 调用支付宝支付
    const payByZfb = () => {
        // 移动端的微信环境才不支持支付宝，pc端的应该是支持的
        if(isWx()) {
            message.warning(`当前环境不支持支付宝支付，请使用微信支付`);
            return;
        }
        // 新开页面，form表单自提交到指定URL，需要额外的一个支付宝支付成功的页面提供给后端
        setLoading(true);
        let formData = new FormData();
        formData.append('type', isPc ? 3 : 4)
        for(let key in rest) {
            formData.append(key, rest[key]);
        }
        getZfbPay(formData).then(response => {
            if(OK_CODE === response?.code) {
                const div = document.createElement('div');
                div.style = 'display:none;';
                div.innerHTML = response.data; //此处form就是后台返回接收到的数据
                document.body.appendChild(div);
                document.forms[0].submit();
            }else{
                setLoading(false);
                message.warning(response?.msg || response?.message || "数据异常，请稍后重试");
            }
        }).catch(e => {
            setLoading(false);
            message.error(e?.msg || e?.message || "数据异常，请稍后重试。");
        });
    };

    return (
        <div className={styles['container']}>
            {
                props.children ?
                    <div onClick={payByZfb}>{props.children}</div>
                    :
                    <button onClick={payByZfb} {...(loading ? {disabled: 'disabled'} : {})}>{loading ? '请求中' : '确认办理'}</button>
            }
        </div>
    )
}
